* {
  box-sizing: border-box;
}
body, html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  height: 100%;
  max-height: 100%;
  padding: 0;
  margin: 0;
}
.content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}

.content .canvas {
  width: 100%;
}

.properties-panel-parent {
  border-left: 1px solid #ccc;
  overflow: auto;
  width: 50%;
}

.theader {
  font-family: Arial;
  font-size: 18px;
}

#sidebarHeader {
  position: absolute;
  top: 0px;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
}

.overlay {
  background-color: rgba(255,165,0, 0.7);
  color: Black;
  border-radius: 5px;
  font-family: Arial;
  font-size: 12px;
  padding: 5px;
  text-align: center;
  width: 120%;
}

.properties-panel-parent > .djs-properties-panel {
  padding-bottom: 70px;
  min-height: 100%;
}

.bpp-table-row > label.bpp-table-row-columns-4,
.bpp-table-row > input.bpp-table-row-columns-4 {
  width: 25%;
  box-sizing: border-box;
}
.bpp-table-row > label.bpp-table-row-columns-4.bpp-table-row-removable,
.bpp-table-row > input.bpp-table-row-columns-4.bpp-table-row-removable {
  width: calc(25% - 8px);
}
.bpp-table-row > label.bpp-table-row-columns-4:not(:first-child),
.bpp-table-row > input.bpp-table-row-columns-4:not(:first-child) {
  border-left: none;
}

.bpp-table-row > label.bpp-table-row-columns-5,
.bpp-table-row > input.bpp-table-row-columns-5 {
  width: 20%;
  box-sizing: border-box;
}
.bpp-table-row > label.bpp-table-row-columns-5.bpp-table-row-removable,
.bpp-table-row > input.bpp-table-row-columns-5.bpp-table-row-removable {
  width: calc(20% - 8px);
}
.bpp-table-row > label.bpp-table-row-columns-5:not(:first-child),
.bpp-table-row > input.bpp-table-row-columns-5:not(:first-child) {
  border-left: none;
}

/*SELECT*/
/* 2 col */
.bpp-table-row > select.bpp-table-row-columns-2 {
  width: 50%;
  box-sizing: border-box;
}
.bpp-table-row > select.bpp-table-row-columns-2.bpp-table-row-removable {
  width: calc(50% - 12px);
}
.bpp-table-row > select.bpp-table-row-columns-2:not(:first-child) {
  border-left: none;
}
/* 3 col */
.bpp-table-row > select.bpp-table-row-columns-3 {
  width: 33%;
  box-sizing: border-box;
}
.bpp-table-row > select.bpp-table-row-columns-3.bpp-table-row-removable {
  width: calc(33% - 12px);
}
.bpp-table-row > select.bpp-table-row-columns-3:not(:first-child) {
  border-left: none;
}
/* 4 col */
.bpp-table-row > select.bpp-table-row-columns-4 {
  width: 25%;
  box-sizing: border-box;
}
.bpp-table-row > select.bpp-table-row-columns-4.bpp-table-row-removable {
  width: calc(25% - 12px);
}
.bpp-table-row > select.bpp-table-row-columns-4:not(:first-child) {
  border-left: none;
}
/* 5 col */
.bpp-table-row > select.bpp-table-row-columns-5 {
  width: 20%;
  box-sizing: border-box;
}
.bpp-table-row > select.bpp-table-row-columns-5.bpp-table-row-removable {
  width: calc(20% - 12px);
}
.bpp-table-row > select.bpp-table-row-columns-5:not(:first-child) {
  border-left: none;
}
/* Positioning of remove btn at iot panel */
.bpp-table-row > select,
.bpp-table-row > .action-button {
  float: left;
}

.btn-container {
  bottom: 20px;
  left: 20px;
  position: absolute;
}

.djs-palette {
  position: absolute;
  left: 20px;
  top: 20px;
  padding-bottom: 10px;

  box-sizing: border-box;
  width: 48px;
}

.djs-palette .entry,
.djs-palette .djs-palette-toggle {
  color: var(--palette-entry-color);
  font-size: 37px;

  text-align: center;
}

.djs-palette.two-column.open {
  width: 94px;
}

.iot-palette-element > img{
  width: 34px!important;
}

#hidePanelButton {
  position: absolute;
  top: 50%;
  right: calc(100vw/3 - 35px);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
}

/* overlay */

.message {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: white;
  z-index: 99;
}

.content > .message {
  text-align: center;
  display: table;

  font-size: 16px;
  color: #111;
}

.content > .message .note {
  vertical-align: middle;
  text-align: center;
  display: table-cell;
}

.content .error .details {
  max-width: 500px;
  font-size: 12px;
  margin: 20px auto;
  text-align: left;
}

.content .error pre {
  border: solid 1px #CCC;
  background: #EEE;
  padding: 10px;
}

.content:not(.with-error) .error,
.content.with-error .intro,
.content.with-diagram .intro {
  display: none;
}


.content .canvas,
.content.with-error .canvas {
  visibility: hidden;
}

.content.with-diagram .canvas {
  visibility: visible;
}

